<template>
	<view>
		<view class="fes"><image src="http://image.zjyph.cn/file/pic/20220920165842296141.png" mode="widthFix"></image></view>
		<view class="fes-f" v-if="isHos">
			<view class="fes-g">
				<view v-for="(item, index) in inforList" :key="index" :class="currenNav == index ? 'navStyle' : 'fes-h'" @click="navClick(index, item.id)">
					{{ item.cateName }}
				</view>
			</view>
		</view>
		<view class="fes-q">
			<view v-for="(item, index) in inforList" :key="item.id">
				<view :class="'fes-w'+index" id="fes-w">
					<image src="../../static/img/biao.png" mode=""></image>
					<view class="fes-e">{{ item.cateName }}</view>
				</view>
				<view class="fes-r">
					<view class="fes-t">
						<view class="fes-y" v-for="(items, index) in item.cateProductList" :key="index" :class="'box' + index" @click="getProduc(items.id)">
							<view class="fes-u"><image :src="items.image" mode=""></image></view>
							<view class="fes-i">{{ items.storeName }}</view>
							<view class="fes-o">已售{{ items.sales }}件</view>
							<view class="fes-p">
								<view class="fes-a">{{ items.price }}豆</view>
								<view class="fes-s">{{ items.otPrice }}豆</view>
								<!-- <view class="fes-d"><image src="../../static/img/jia.png" mode=""></image></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var scroll_top = 0;
import { getFestival } from '@/api/activity';
export default {
	data() {
		return {
			navArry: [{ name: '优品豆100套餐' }, { name: '优品豆200套餐' }, { name: '优品豆300套餐' }, { name: '优品豆400套餐' }],
			currenNav: 0,
			festiv: 6,
			h: uni.getSystemInfoSync().statusBarHeight + 45,
			numsiz: 0,
			isHos: false,
			inforList: []
		};
	},
	onPageScroll(e) {
		scroll_top = e.scrollTop;
		this.numsiz = e.scrollTop;
		if (this.numsiz > 300) {
			this.isHos = true;
		} else if (this.numsiz == 0) {
			this.isHos = false;
		}
	},
	mounted() {
		this.gettesefun();
	},
	methods: {
		gettesefun() {
			getFestival().then(res => {
				if (res.status == 200) {
					this.inforList = res.data;
				}
			});
		},
		navClick: function(index, id) {
			this.currenNav = index;
			uni.createSelectorQuery()
				.select('.fes-w'+index)
				.boundingClientRect(function(res) {
					console.log(res);
					uni.pageScrollTo({
						scrollTop: res.top,
						duration: 300
					});
				})
				.exec();
		},

		getProduc(id) {
			this.$yrouter.push({
				path: '/pages/shop/GoodsCon/index',
				query: {
					id: id
				}
			});
		}
	}
};
</script>
<style>
	page{
		background: #c71929 !important;
	}
</style>
<style lang="less" scoped>
.fes {
	width: 100%;
	height: 100%;
	image {
		width: 100%;
		height: 100%;
	}
}
.fes-f {
	position: fixed;
	top: 0;
	width: 100%;
	height: 80rpx;
	margin-bottom: 24rpx;
	background: #ffffff;
	z-index: 10;
	.fes-g {
		width: 94%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		.fes-h {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #333333;
			line-height: 80rpx;
		}
		.navStyle {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #f9690a;
			line-height: 80rpx;
			border-bottom: 4rpx solid #f9690a;
		}
	}
}
.fes-q {
	width: 100%;
	position: absolute;
	top: 818rpx;

	#fes-w {
		width: 295rpx;
		height: 67rpx;
		margin: auto;
		image {
			width: 100%;
			height: 100%;
		}
		.fes-e {
			position: relative;
			height: 67rpx;
			margin-top: -76rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #feead0;
			line-height: 67rpx;
			text-align: center;
		}
	}
	.fes-r {
		margin-top: 43rpx;
		.fes-t {
			width: 94%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.fes-y {
				width: 344rpx;
				height: 500rpx;
				background: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				.fes-u {
					height: 304rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.fes-i {
					width: 312rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 36rpx;
					margin: 24rpx auto;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					display: -webkit-box;
					-webkit-line-clamp: 2; // 超出多少行
					-webkit-box-orient: vertical;
				}
				.fes-o {
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
					margin-left: 16rpx;
					margin-top: -10rpx;
				}
				.fes-p {
					display: flex;
					margin-top: 4rpx;
					.fes-a {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ff1a1a;
						line-height: 36rpx;
						margin-left: 16rpx;
					}
					.fes-s {
						font-size: 22rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						text-decoration: line-through;
						color: #999999;
						line-height: 36rpx;
						margin-left: 8rpx;
					}
					.fes-d {
						width: 28rpx;
						height: 28rpx;
						margin-left: 158rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}
</style>
